<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link
			href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
			rel="stylesheet"
		/>
		<style>
			#editor—wrapper {
				border: 1px solid #ccc;
				z-index: 100; /* 按需定义 */
			}
			#toolbar-container {
				border-bottom: 1px solid #ccc;
			}
			#editor-container {
				height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="editor—wrapper">
			<div id="toolbar-container"><!-- 工具栏 --></div>
			<div id="editor-container"><!-- 编辑器 --></div>
		</div>
	</body>
	<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
	<script>
		const { createEditor, createToolbar } = window.wangEditor;

		const editorConfig = {
			placeholder: "Type here...",
			onChange(editor) {
				const html = editor.getHtml();
				console.log("editor content", html);
				// 也可以同步到 <textarea>
			},
		};

		const editor = createEditor({
			selector: "#editor-container",
			html: "<p><br></p>",
			config: editorConfig,
			mode: "default", // or 'simple'
		});

		const toolbarConfig = {};

		const toolbar = createToolbar({
			editor,
			selector: "#toolbar-container",
			config: toolbarConfig,
			mode: "default", // or 'simple'
		});
	</script>
</html>
